<!--
 * @Date: 2022-04-06 20:11:39
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-07-10 11:39:57
 * @FilePath: \weibovue\src\components\headerActive.vue
 * @Description: something
-->
<template>
  <transition
    name="animate__animated animate__bounce"
    enter-active-class="animate__fadeInDown"
    leave-active-class="animate__fadeOutUp"
  >
    <div class="header" v-show="isShow" style="animation-duration: 500ms">
      <div class="container">
        <div class="center">
          <div
            class="centerItem"
            v-for="(item, index) in centerItemData"
            :key="index"
            :class="activeIdx == index ? 'active' : ''"
            :alt="item.name"
            @click="clickItem(index, item)"
          >
            <i
              :class="`iconfont ${
                item.isChange
                  ? `${mode ? 'icon-baitianmoshi' : 'icon-dark'}`
                  : item.icon
              }`"
            ></i>
          </div>
          <notification :value="infoCount" :max="99">
            <template #default>
              <list-show
                :listData="meInfoData"
                :actions="actions"
                @clickItem="clickNotificationItem"
                @clickAction="clickActionItem"
              ></list-show>
            </template>
          </notification>
        </div>
      </div>
    </div>
  </transition>
</template>
<script lang="ts" setup>
import "animate.css";
import {
  computed,
  getCurrentInstance,
  inject,
  reactive,
  ref,
  watch,
} from "vue";
import { useRouter } from "vue-router";
import listShow from "../components/listShow/index.vue";
import { actions } from "../components/listShow/data";
import notification from "../components/Notification/index.vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { atMeBlogItem, atMeReplyItem } from "../store/types";
import { ActionOptions } from "./listShow/type";
const infoCount = computed(() => store.state.atMeCount);
const { $api } = getCurrentInstance()!.appContext.config.globalProperties!;
interface ItemType {
  icon: string;
  name: string;
  isChange?: boolean;
}
const router = useRouter();
const store = useStore();
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
});
let atMeBlogData = reactive<{ title: string; content: atMeBlogItem[] }>({
  title: "@我的博客",
  content: [],
});
let atMeReplyData = reactive<{ title: string; content: atMeReplyItem[] }>({
  title: "回复我的",
  content: [],
});
let meInfoData = ref([atMeReplyData, atMeBlogData]);
//动态样式变化值
let activeIdx = ref(0);
let mode = ref<boolean>(false);
const centerItemData = reactive<ItemType[]>([
  { icon: "icon-home", name: "Home" },
  { icon: "icon-shezhi", name: "Setting" },
  { icon: "icon-dark", name: "Notification", isChange: true },
]);
const clickItem = (index: number, item: ItemType) => {
  activeIdx.value = index;
  if (item.name == "Setting") {
    if (store.state.isLogin) {
      router.push({ name: item.name });
    } else {
      ElMessage({
        type: "error",
        message: "您还未登录，无法设置个人信息哦~",
      });
      activeIdx.value = 0;
    }
  } else if (item.name == "Notification") {
    fnChangeMode();
  } else {
    router.push({ name: item.name });
  }
};
//已读回复
const markAsRead = async (
  blogId: number = -1,
  ReplyId: number = -1,
  commentId: number = -1,
) => {
  let res = await $api.user.readReply(blogId, ReplyId, commentId);
};
//已读博客@
const markBlogAsRead = async (blogId?: number) => {
  let res = await $api.user.readBlog(blogId);
};
//点击消息列表item
const clickNotificationItem = (val: { item: atMeReplyItem; index: number }) => {
  // console.log(val.item.parantId);

  if (val.item.parantId && val.item.parantId !== null) {
    markAsRead(-1, val.item.id, -1);
    router.push({
      name: "blogDetail",
      params: { blogId: val.item.blogId, userId: -1 },
    });
  } else if (val.item.parantId === null) {
    markAsRead(-1, -1, val.item?.commentId);
    router.push({
      name: "blogDetail",
      params: { blogId: val.item.blogId, userId: -1 },
    });
  } else if (val.item.parantId === undefined) {
    markBlogAsRead(val.item.id);
    router.push({
      name: "blogDetail",
      params: { blogId: val.item?.id, userId: val.item?.userId },
    });
  }
};
//点击消息列表操作item
const clickActionItem = (val: { item: ActionOptions; index: number }) => {
  // console.log(val);
  if (!store.state.isLogin) {
    ElMessage.error("请先登录！");
    return;
  }
  if (val.index == 0) {
    //清空已读
    if (atMeReplyData.content.length || atMeBlogData.content.length) {
      markAsRead();
      markBlogAsRead(-1);
      store.commit("updateAtMeBlogList", []);
      store.commit("updateAtMeReplyList", []);
      store.commit("updateAtMeCount", 0);
      atMeReplyData.content.length = 0;
      atMeBlogData.content.length = 0;
      meInfoData.value = [];
    } else {
      ElMessage.warning("没有内容哦~");
    }
  } else if (val.index == 1) {
    //查看更多
    router.push({ name: "atMeDetail" });
  }
};
const fnChangeMode = () => {
  mode.value = !mode.value;
  sendMode(mode.value);
};
const getMode: (mode: boolean) => void = inject("getMode")!;
const sendMode = (mode: boolean) => {
  getMode(mode);
};
watch(
  () => store.state.atMeBlogList,
  (val) => {
    atMeBlogData.content = val;
  },
  { immediate: true },
);
watch(
  () => store.state.atMeReplyList,
  (val) => {
    // console.log(val);
    atMeReplyData.content = val;
  },
  { immediate: true },
);
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 60px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #ffffff;
  border-top: 2px solid #ff8200;
  display: flex;
  justify-content: center;
  align-items: center;
  .container {
    max-width: 1300px;
    height: 100%;
    .center {
      position: relative;
      width: 642px;
      height: 100%;
      // background-color: #ff8200;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .centerItem {
        width: 100px;
        height: 100%;
        margin: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        i {
          font-size: 34px;
          padding: 10px;
        }
        &:hover {
          background-color: #f2f2f2;
        }
      }
    }
  }
}
.active {
  border-bottom: 2px solid #ff8200;
  color: #ff8200;
}
</style>
